<template>
  <div class="CPT_BorderFactory">
    <div class="factoryArea">
      <div class="borderMask" :style="borderStyle">
        <slot />
      </div>
      <div class="borderContent">
        <slot />
      </div>
    </div>
  </div>
</template>
<script>
//
export default {
  inheritAttrs: false,
  name: "CPT_BorderFactory",
  props: {
    scrollTop: {
      type: Number,
      default: 0,
    },
    timestep: {
      //节流间隔
      type: Number,
      default: 50,
    },
    range: {
      //亮边范围，默认80px
      type: [String, Number],
      default: 80,
    },
  },
  computed: {
    _range() {
      return Number(this.range) || 80
    },
  },
  data() {
    return {
      borderStyle: {},
      bounding: {},
      stamp: 0,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.bounding = this.$el
        .querySelector(".borderMask")
        .getBoundingClientRect()
      this.initMask()
      this.initBorder()
    },
    initMask() {
      const borderMask = this.$el.querySelector(".borderMask")

      borderMask.style.setProperty(
        "-webkit-mask-image",
        "radial-gradient(circle at center, white 0%, transparent " +
          this._range +
          "px"
      )
      borderMask.style.setProperty(
        "-webkit-mask-size",
        this._range * 2 + "px " + this._range * 2 + "px"
      )
    },
    initBorder() {
      const that = this
      const range = this.range
      const bounding = that.bounding
      const timestep = this.timestep
      const factoryArea = that.$el.querySelector(".factoryArea")
      factoryArea.addEventListener("mousemove", function(ev) {
        const stamp = +new Date()
        if (stamp - that.stamp > timestep) {
          //传入毫秒节流 默认50
          let x = ev.pageX
          let y = ev.pageY
          const sx = x - bounding.x - range
          const sy = y - bounding.y - range + that.scrollTop
          that.borderStyle = {
            webkitMaskPosition: `${sx}px ${sy}px`,
          }
          that.stamp = stamp
        }
      })
    },
  },
}
</script>
<style lang="scss">
.CPT_BorderFactory {
  .factoryArea {
    position: relative;
  }
  .borderContent {
    .Chip_BorderFactoryItem {
      border: 2px transparent solid;
      user-select: none;
      transition: $trans3;
      &:hover {
        border-color: $dark2;
      }
      &:active {
        border-color: $blue;
      }
    }
  }
  .borderMask {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    visibility: hidden;
    mask-repeat: no-repeat;
    .Chip_BorderFactoryItem {
      user-select: none;
      border: 2px $dark2 solid;
      * {
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent;
      }
    }
  }
  &:hover {
    .borderMask {
      visibility: visible;
    }
  }
}
</style>
